Adwaita: saner treeview lines style plus treeview expander style
authorLapo Calamandrei <calamandrei@gmail.com>
Thu, 10 Jul 2014 12:59:08 +0000 (14:59 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Thu, 10 Jul 2014 12:59:08 +0000 (14:59 +0200)
gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 261004e40d1df7c3c218577e6fc98bfbf63ddce5..3ab3009c8eb944015fb10e524774028f628a9f30 100644 (file)
@@ -829,25 +829,32 @@ GtkComboBox {
 /**************
  * Tree Views *
  **************/
-
-GtkTreeView.view { // all this mess is to theme the treeview grid lines
-                   // which reacts to "color", hope to be able to axe this
-                   // one day
+GtkTreeView.view { // treeview grid lines and expanders, unfortunatelly
+                   // the tree lines color can't be set
   -GtkTreeView-grid-line-width: 1;
   -GtkTreeView-grid-line-pattern: '';
-  color: $bg_color; // this is actually the line color
-  &:selected { color: $base_color; };
+  -GtkTreeView-tree-line-width: 1;
+  -GtkTreeView-tree-line-pattern: '';
+  -GtkTreeView-expander-size: 16;
+  border-color: $bg_color; // this is actually the line color
+  // :selected is ignored hence no style for it
   &:backdrop {
-    color: $backdrop_bg_color;
-    &:selected { color: $backdrop_base_color; }
+    border-color: $backdrop_bg_color;
   }
-  column { // this is to override the previously set color...
-    color: $fg_color;
-    &:selected { color: $selected_fg_color; }
-    &:backdrop {
-      color: $backdrop_fg_color;
-      &:selected { color: $backdrop_base_color; };
+  &.expander {
+    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+    color: mix($fg_color, $base_color, 70%);
+    &:hover { color: $fg_color; }
+    &:selected {
+      color: mix($selected_fg_color, $selected_bg_color, 70%);
+      &:hover { color: $selected_fg_color; }
+      &:backdrop { color: mix($backdrop_base_color, $selected_bg_color, 70%); }
+    }
+    &:active {
+      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
     }
+    &:backdrop { color: mix($backdrop_fg_color, $backdrop_base_color, 70%); }
   }
 }
 
index 4fe64d3769e46a0bb446232eeffdc74d581eb32e..c3f434d79822817846665135f4ef2d2b286bf46a 100644 (file)
@@ -1020,21 +1020,29 @@ GtkComboBox {
 GtkTreeView.view {
   -GtkTreeView-grid-line-width: 1;
   -GtkTreeView-grid-line-pattern: '';
-  color: #393f3f; }
-  GtkTreeView.view:selected {
-    color: #292929; }
+  -GtkTreeView-tree-line-width: 1;
+  -GtkTreeView-tree-line-pattern: '';
+  -GtkTreeView-expander-size: 16;
+  border-color: #393f3f; }
   GtkTreeView.view:backdrop {
-    color: #393f3f; }
-    GtkTreeView.view:backdrop:selected {
-      color: #2c2c2c; }
-  GtkTreeView.view column {
-    color: #eeeeec; }
-    GtkTreeView.view column:selected {
-      color: white; }
-    GtkTreeView.view column:backdrop {
-      color: #c9cbc9; }
-      GtkTreeView.view column:backdrop:selected {
-        color: #2c2c2c; }
+    border-color: #393f3f; }
+  GtkTreeView.view.expander {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    color: #b2b2b1; }
+    GtkTreeView.view.expander:dir(rtl) {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+    GtkTreeView.view.expander:hover {
+      color: #eeeeec; }
+    GtkTreeView.view.expander:selected {
+      color: #bccee1; }
+      GtkTreeView.view.expander:selected:hover {
+        color: white; }
+      GtkTreeView.view.expander:selected:backdrop {
+        color: #283a4d; }
+    GtkTreeView.view.expander:active {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+    GtkTreeView.view.expander:backdrop {
+      color: #999b99; }
 
 column-header .button {
   color: #8b8b8a;
index 8c07aa2146b45a08910c1762b2a129d3d84c7b7d..9fb01371147bb9aac661d1e35d324ce1bf860adf 100644 (file)
@@ -1012,21 +1012,29 @@ GtkComboBox {
 GtkTreeView.view {
   -GtkTreeView-grid-line-width: 1;
   -GtkTreeView-grid-line-pattern: '';
-  color: #ededed; }
-  GtkTreeView.view:selected {
-    color: white; }
+  -GtkTreeView-tree-line-width: 1;
+  -GtkTreeView-tree-line-pattern: '';
+  -GtkTreeView-expander-size: 16;
+  border-color: #ededed; }
   GtkTreeView.view:backdrop {
-    color: #ededed; }
-    GtkTreeView.view:backdrop:selected {
-      color: #fcfcfc; }
-  GtkTreeView.view column {
-    color: #2e3436; }
-    GtkTreeView.view column:selected {
-      color: white; }
-    GtkTreeView.view column:backdrop {
-      color: #54595a; }
-      GtkTreeView.view column:backdrop:selected {
-        color: #fcfcfc; }
+    border-color: #ededed; }
+  GtkTreeView.view.expander {
+    -gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
+    color: #6c7072; }
+    GtkTreeView.view.expander:dir(rtl) {
+      -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+    GtkTreeView.view.expander:hover {
+      color: #2e3436; }
+    GtkTreeView.view.expander:selected {
+      color: #c8ddf3; }
+      GtkTreeView.view.expander:selected:hover {
+        color: white; }
+      GtkTreeView.view.expander:selected:backdrop {
+        color: #c6dbf1; }
+    GtkTreeView.view.expander:active {
+      -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+    GtkTreeView.view.expander:backdrop {
+      color: #86898a; }
 
 column-header .button {
   color: #96999a;